/**
 * Created by 刘丹 on 2017/12/8.
 * 原生封装
 * 调用方法为 paging(当前页,总页码,function (data) {}) data为点击后当前页
 * 只是适用于IE8以上浏览器
 */
/*html部分*/
/*<div class="paging" id="page" data-current="1" data-count="1">
    <a data-page="first">首页</a>
    <a data-page="prev">上一页</a>
    <span class="page-number"></span>
    <a data-page="next">下一页</a>
    <a data-page="end">尾页</a>
    <span class="total">共 <span class="total-page"></span> 页 到
<input data-min="1" data-max="" step="1" type="number"/> 页
    </span>
    <button data-page="jump">跳转</button>
    </div>*/
/*css部分*/
/*
.paging a,.paging button{text-decoration: none;padding: 2px 4px;border: 1px solid #999;color: #333;border-radius: 3px;vertical-align: middle;-webkit-appearance: none;margin-right: 5px;user-select:none;}
.paging button{padding:6px;background-color: #fff;}
.paging a.current{background-color: #fb6238;color: #fff;border-color: #fb6238;outline: none;}
.paging a:hover{color: #fb6238;border-color: #fb6238;}
.paging input{width: 40px;height: 18px;padding: 2px;border-radius: 3px;-webkit-appearance: none;outline: none;border: 1px solid #999;}
.paging .total{font-size: 12px;color: #999;}
*/
    function paging(current,total,fn,id) {
        function Page(current,total,fn,id) {
            if(!id){
                this.page=document.getElementById('page');
            }else {
                this.page=document.getElementById(id).querySelector('.paging');
            }
            this.span=this.page.querySelector('.page-number');
            this.totalPage=this.page.querySelector('.total-page');
            this.ipt=this.page.querySelector('input');
            this.current=1;
            this.total=null;
            if(total<2){
                this.page.style.display='none';
                return;
            }
            this.init(current,total,fn);
            this.page.style.display='block';
        }
        Page.prototype={
            constructor: Page,
            init:function (current, total, fn) {
                this.PageShow(current,total);
                this.pageClick(fn);
                this.keyDown(fn);
            },
            PageShow:function (current,total) {
                this.current=this.ipt.value=current;
                this.total=this.totalPage.innerText=total;
                var str="";
                if(total<10 ||(total>10 && current<6)){
                    for (var i = 1,len=total>10?10:total; i <= len; i++) {
                        if(i==current){
                            str+='<button data-page="'+i+'" class="current">'+i+'</button>'
                        } else {
                            str+='<button  data-page="'+i+'" >'+i+'</button>'
                        }
                    }
                }else{
                    var start=current-5,
                        end=current/1+5;
                    if(end>total){
                        end=total;
                        start=total-10;
                    }
                    for (var j = start,lens=end; j <= lens; j++) {
                        if(j==current){
                            str+='<a data-page="'+j+'" class="current">'+j+'</a>'
                        } else {
                            str+='<a  data-page="'+j+'" >'+j+'</a>'
                        }
                    }
                }

                this.span.innerHTML=str;
                this.ipt.dataset.max=total;
                this._pageDisabled();
            },
            _pageDisabled:function () {
                if(this.current == 1){
                    this.page.querySelector('.first').setAttribute('disabled','disabled');
                    this.page.querySelector('.prev').setAttribute('disabled','disabled');
                }else {
                    this.page.querySelector('.first').removeAttribute('disabled');
                    this.page.querySelector('.prev').removeAttribute('disabled');
                }
                if(this.total==this.current){
                    this.page.querySelector('.next').setAttribute('disabled','disabled');
                    this.page.querySelector('.end').setAttribute('disabled','disabled');
                }else {
                    this.page.querySelector('.next').removeAttribute('disabled');
                    this.page.querySelector('.end').removeAttribute('disabled');
                }
            },
            pageClick:function (callback) {
                var self=this;
                this.page.addEventListener('click',function (e) {
                    var target=e.srcElement,
                        page=target.dataset.page,
                        jumpPage=self.current,
                        total=self.total;
                    switch (page){
                        case 'first':{
                            jumpPage= 1;
                        }
                            break;
                        case 'prev':{
                            if(jumpPage>1){
                                jumpPage-= 1;
                            }
                        }
                            break;
                        case 'next':{
                            if(jumpPage<total&&jumpPage>0){
                                jumpPage+= 1;
                            }
                        }
                            break;
                        case 'end':{
                            jumpPage=total;
                        }
                            break;
                        case 'jump':{
                            jumpPage= self.ipt.value;
                        }
                            break;
                        default:{
                            if(typeof page!='undefined'){
                                jumpPage=page;
                            }
                        }
                    }
                    if((jumpPage/1 !=self.current/1) && (jumpPage/1>=1) && (jumpPage/1<=self.total/1)){
                        self.PageShow(jumpPage,self.total);
                        self.current=jumpPage;
                        if(callback&&typeof callback=='function'){
                            callback(jumpPage);
                        }
                    }
                })
            },
            keyDown:function (callback) {
                var total,current,self=this;
                this.ipt.addEventListener('keyup',function (e) {
                    total=this.dataset.max;
                    current=this.value;
                });
                this.ipt.addEventListener('keydown',function (e) {
                    if((e.keyCode==13)&&(current/1>=1) && (current/1<=total/1)){
                        self.PageShow(current,total);
                        if(callback&&typeof callback=='function'){
                            callback(current);
                        }
                    }
                })
            }
        };
        return new Page(current,total,fn,id);
    }
